<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>


    <!-- 列表头高级查询 -->

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>高级查询</legend>
    </fieldset>


    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">管理员编号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" id="id" autocomplete="off" class="layui-input" placeholder="请输入">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">管理员名称:</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" autocomplete="off" class="layui-input" placeholder="请输入">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="adminDoSearch" lay-filter="demo1">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="doReset">重置</button>
            </div>
        </div>
    </form>
    <div class="layui-btn-group demoTable">
        <button class="layui-btn" data-type="getCheckData" id="adminAlldata">获取选中行数据</button>
        <button class="layui-btn" data-type="getCheckLength" id="adminAllNum">获取选中数目</button>
        <button class="layui-btn" data-type="refresh" id="adminAllRefresh">刷新</button>
        <button class="layui-btn" data-type="addUser" id="adminAllAdd">添加</button>
    </div>
    <table class="layui-hide" id="test6" lay-filter="test6"></table>
    <div style="display: none" id="adminbarDemo" type="text/html">
        <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
    </div>


    <script>

        layui.use(['jquery', 'layer', 'table', 'form', 'config'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;
            var config = layui.config;
            // 表格渲染
            table.render({
                elem: '#test6'
                , url: config.base_server + 'GetAdminList'
                , id: "demo"
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'id', width: 80, title: '管理员编号', sort: true, width: '15%', minWidth: 100 }
                    , { field: 'name', width: 80, title: '管理员姓名', width: '15%', minWidth: 100 }
                    , { field: 'password', width: 80, title: '管理员密码', width: '15%', minWidth: 100 }
                    , {
                        field: 'url', width: 80, title: '管理员头像', width: '20%', minWidth: 100,
                        templet: function (d) { return '<div ><img src=' + d.url + ' style="width: 50px;"></div>' }
                    }
                    , { field: 'sex', width: 80, title: '管理员性别', width: '15%', minWidth: 100 }
                    , { title: '操作', toolbar: '#adminbarDemo' }


                ]]
                , page: true //开启分页
                , skin: 'row' //行边框风格
                , even: true //开启隔行背景
                , size: 'lg' //小尺寸的表格
            });
            //行内按钮事件的监听
            table.on('tool(test6)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    var editId = data.id;
                    var fu = layer.open({
                        type: 2,
                        title: "查看" + editId + "号管理员",
                        area: ['600px', '450px'],
                        fix: false,
                        content: 'components/system/adminDetailTable.html?editNo=' + editId,
                        maxmin: true,
                        end: function () {
                            table.reload('demo', {
                                url: config.base_server + 'GetAdminList' //数据接口  
                                , where: {} //设定异步数据接口的额外参数        
                            });
                        }
                    });

                } else if (obj.event === 'del') {
                    var editId = data.id;

                    var fu = layer.open({
                        type: 2,
                        title: "删除" + editId + "号用户",
                        area: ['400px', '250px'],
                        fix: false,
                        content: 'components/system/adminDeleteTable.html?editNo=' + editId,

                        maxmin: true,
                        end: function () {

                            table.reload('demo', {
                                url: config.base_server + 'GetAdminList' //数据接口  
                                , where: {} //设定异步数据接口的额外参数        
                            });
                        }
                    });



                } else if (obj.event === 'edit') {
                    var editId = data.id;
                    var fu = layer.open({
                        type: 2,
                        title: "编辑测试" + editId + "号用户",
                        area: ['600px', '450px'],
                        fix: false,
                        content: 'components/system/adminEditTable.html?editNo=' + editId,
                        maxmin: true,
                        end: function () {
                            table.reload('demo');
                        }
                    });

                }
            });

            $('#adminAlldata').on('click', function () {
                var checkStatus = table.checkStatus('demo')
                    , data = checkStatus.data;
                layer.alert(data.map(item => {
                    return item.name;
                }).join(","));
            });
            $('#adminAllNum').on('click', function () {

                var checkStatus = table.checkStatus('demo')
                    , data = checkStatus.data;
                var datas = JSON.stringify(data)
                var ids = ''
                for (var i = 0; i < datas.length; i++) {
                    ids = ids + datas[i].UserNo
                }
                layer.msg('选中了：' + data.length + ' 个');

            });

            $('#adminAllRefresh').on('click', function () {
                location.reload();
            });

            //添加按钮 
            $('#adminAllAdd').on('click', function () {
                console.log(11)
                var fu = layer.open({
                    type: 2,
                    title: '添加测试',
                    area: ['700px', '500px'],
                    fix: false,
                    content: 'components/system/adminAddTable.html',
                    maxmin: true,
                    end: function () {
                        table.reload('demo', {
                            url: config.base_server + 'GetAdminList' //数据接口 

                            , where: {} //设定异步数据接口的额外参数        
                        });

                    }

                });

                // layer.full(fu);
            });

            $('#btn5').on('click', function () {
                location.reload();
            });

            //  查询按钮
            $('#adminDoSearch').on('click', function () {
                var id = $("input[name='id']").val();
                var name = $("input[name='name']").val();
                table.reload('demo', {
                    url: config.base_server + 'GetAdminList' //数据接口
                    , where: { id: id, name: name }
                });


            });

            //重置：待解决刷新问题 
            $('#doReset').on('click', function () {
                location.reload();
            });
        });


    </script>

</body>

</html>